<!DOCTYPE HTML>
<html>
    <head>
        <title>nativeDroid - Theme for jQuery Mobile</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		
		<!-- FontAwesome - http://fortawesome.github.io/Font-Awesome/ -->
        <link rel="stylesheet" href="css/font-awesome.min.css" />

		<!-- jQueryMobileCSS - original without styling -->
        <link rel="stylesheet" href="css/jquerymobile.css" />

		<!-- nativeDroid core CSS -->
        <link rel="stylesheet" href="css/jquerymobile.nativedroid.css" />

		<!-- nativeDroid: Light/Dark -->
        <link rel="stylesheet" href="css/jquerymobile.nativedroid.dark.css"  id='jQMnDTheme' />

		<!-- nativeDroid: Color Schemes -->
        <link rel="stylesheet" href="css/jquerymobile.nativedroid.color.green.css" id='jQMnDColor' />

		<!-- jQuery / jQueryMobile Scripts -->
		<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

		<!-- Extras for: Cards.html -->
	    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>


    </head>
    <body>

	<div id='map-canvas'></div>
        
    <div data-role="page" data-theme='b'>


        <div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme='b'>
            <a href="index.html" data-ajax="false"><i class='icon-ellipsis-vertical'></i></a>
            <h1>Cards</h1>
        </div>
        
        <div data-role="content">   


			<ul data-nativedroid-plugin='cards'>
				<li data-cards-type='weather'>
					<h1>Zurich</h1>
					<h2>Switzerland</h2>
					<ul class='detail'>
						<li><i class='icon-circle sunny'></i>
							<span>SUNNY</span>
							<span><i class='icon-fire'></i> 3km/h</span>
						</li>
						<li>14&deg;</li>
					</ul>
					<ul class='week'>
						<li>
							<span>WED</span>
							<i class='icon-cloud'></i>
							<strong>24&deg;</strong>
							<span>11&deg;</span>
						</li>
						<li>
							<span>THU</span>
							<i class='icon-cloud'></i>
							<strong>20&deg;</strong>
							<span>10&deg;</span>
						</li>
						<li>
							<span>FRI</span>
							<i class='icon-cloud'></i>
							<strong>11&deg;</strong>
							<span>3&deg;</span>
						</li>
						<li>
							<span>SAT</span>
							<i class='icon-cloud'></i>
							<strong>4&deg;</strong>
							<span>0&deg;</span>
						</li>
					</ul>
				</li>

				<li data-cards-type='publictransport'>
					<h1>Charleston &amp; Huff</h1>
					<h2>Bus station</h2>
					<table>
						<tr>
							<td>40</td>
							<td>40 SB Foothill College</td>
							<td>02:40</td>
						</tr>
						<tr>
							<td>120</td>
							<td>120 NB Express Fremont Bart Station</td>
							<td>02:46</td>
						</tr>
						<tr>
							<td>40</td>
							<td>40 NB La Avenida &amp; Shoreline</td>
							<td>02:47</td>
						</tr>
						<tr>
							<td>40</td>
							<td>40 SB Foothill College</td>
							<td>03:10</td>
						</tr>
						<tr>
							<td>40</td>
							<td>40 NB La Avenida &amp; Shoreline</td>
							<td>03:14</td>
						</tr>
					</table>
					<a href='#'><i class='icon-file-alt'></i>All scheduled departures</a>
				</li>
				<li data-cards-type='traffic' data-cards-traffic-route='{"from":"42.350742,-71.083217","to":"42.353709,-71.053613","type" : "coords"}'>
					<h1><strong>18 minutes</strong> to Home</h1>
					<h2>Normal traffic on US-101 N</h2>
					<div class='map'></div>
					<a href='#'><i class='icon-screenshot'></i>Navigate</a>
				</li>

				<li data-cards-type='sports'>
					<h1>Bayern M&uuml;nchen<span>4</span></h1>
					<h1>Barcelona<span>0</span></h1>
					<h2>Final, April 23</h2>
				</li>

				<li data-cards-type='text'>
					<h1>Default Card</h1>
					<h2>Subtitle of a default card</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec sapien eu lorem condimentum mollis vel vel mauris. Proin dolor libero, ultricies quis semper eu, bibendum nec quam. Sed pellentesque, nunc vitae ornare tempus, turpis nisl aliquam nisl, vel faucibus neque magna eu odio. Fusce venenatis sem vitae arcu lacinia tincidunt. Quisque ornare sollicitudin mauris, adipiscing auctor magna commodo vel. Praesent ipsum diam, feugiat ut vulputate eget, congue id lorem. Mauris sollicitudin venenatis aliquam. Aliquam interdum orci a orci posuere fermentum. Vestibulum placerat tristique sem, eu pretium nisl feugiat in. Phasellus non mi mi. Proin porta metus in nulla fringilla non adipiscing risus ullamcorper.</p>
				</li>
				
				<li data-cards-type='text'>
					<h1>TweetFeed</h1>
					<h2>#jquery</h2>
					<p>Twitter API v1 has gone. So try to use: <a href='https://dev.twitter.com/docs/embedded-timelines'>Embedded-timelines</a></p>
				</li>
							
				<li data-cards-type='text'>
					<h1>Default Card</h1>
					<h2>Subtitle of a default card</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec sapien eu lorem condimentum mollis vel vel mauris. Proin dolor libero, ultricies quis semper eu, bibendum nec quam. Sed pellentesque, nunc vitae ornare tempus, turpis nisl aliquam nisl, vel faucibus neque magna eu odio. Fusce venenatis sem vitae arcu lacinia tincidunt. Quisque ornare sollicitudin mauris, adipiscing auctor magna commodo vel. Praesent ipsum diam, feugiat ut vulputate eget, congue id lorem. Mauris sollicitudin venenatis aliquam. Aliquam interdum orci a orci posuere fermentum. Vestibulum placerat tristique sem, eu pretium nisl feugiat in. Phasellus non mi mi. Proin porta metus in nulla fringilla non adipiscing risus ullamcorper.</p>
				</li>
				<li data-cards-type='text'>
					<h1>Default Card</h1>
					<h2>Subtitle of a default card</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec sapien eu lorem condimentum mollis vel vel mauris. Proin dolor libero, ultricies quis semper eu, bibendum nec quam. Sed pellentesque, nunc vitae ornare tempus, turpis nisl aliquam nisl, vel faucibus neque magna eu odio. Fusce venenatis sem vitae arcu lacinia tincidunt. Quisque ornare sollicitudin mauris, adipiscing auctor magna commodo vel. Praesent ipsum diam, feugiat ut vulputate eget, congue id lorem. Mauris sollicitudin venenatis aliquam. Aliquam interdum orci a orci posuere fermentum. Vestibulum placerat tristique sem, eu pretium nisl feugiat in. Phasellus non mi mi. Proin porta metus in nulla fringilla non adipiscing risus ullamcorper.</p>
				</li>
			</ul>

	        
        </div>

    </div>
    
    <script src="js/nativedroid.script.js"></script>
    </body>
</html>
